<template>
   <view class="search_header">
     <!-- 搜索 -->
     <view class="search_input">
       <text class="iconfont icon-yinle3"></text>
      <view class="input_views">
          <text class="iconfont icon-sousuo1"></text>
          <input class="u-input" :placeholder="defaultKeywords" v-model="words" @input="searchKeywords"/>
      </view>
       <text style="cursor: pointer;" @click="gotoSearchResultsPage">搜索</text>
     </view>
     <!-- 搜索关键词列表 -->
     <view class="list" v-if="words">
       <List :allMatch="keyWords.allMatch" :words="words"></List>
     </view>
   </view>
</template>

<script setup>
  import List from '../List/List.vue'
  import { getSearchSuggestAPI,getSearchDefaultAPI } from '@/common/api/searchAPI.js'
  import { ref,onMounted } from 'vue'
  
  
  // 前往搜索结果页
  const gotoSearchResultsPage = () => {
    uni.redirectTo({
      url:`/subpages/searchResult/searchResult?keywords=${words.value.trim() ? words.value : defaultKeywords.value}`,
    })
  }
  
  // 获取搜索关键词
  const words = ref('')
  const keyWords = ref({})
  const getSearchSuggest = async (keywords) => {
    const res = await getSearchSuggestAPI(keywords)
    if(res.code !== 200) return uni.showToast({
      title:'获取搜索关键词失败！',
      duration:2000,
      icon:'error'
    })
    keyWords.value = res.result
    res.result.allMatch.forEach((item,index) => {
     item.keywordNode = item.keyword.replace(words.value,`<span style="color:#6e6e6e">${words.value}</span>`)
     item.keywordNode = `<div>${item.keywordNode}</div>`
    })
  }
  
  // 获取搜索关键字列表
  let timer = null
  const searchKeywords = (e) => {
    const { value } = e.detail
    if(value.trim()){
      clearTimeout(timer)
      timer = setTimeout(()=>{
        getSearchSuggest(value)
      },300)
    }
  }
  
  // 获取默认搜索关键词
  const defaultKeywords = ref('')
  const getSearchDefault = async () => {
    const res = await getSearchDefaultAPI()
    if(res.code !== 200) return uni.showToast({
      title:'获取默认搜索关键词失败',
      duration:2000,
      icon:'error'
    })
    defaultKeywords.value = res.data.showKeyword
  }
  defineExpose({
    words,
    gotoSearchResultsPage
  })
  
  onMounted(()=>{
    getSearchDefault()
  })
</script>

<style lang="scss" scoped>
  .search_header{
    position: relative;
    height: 90rpx;
    .search_input{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      .icon-yinle3{
        font-size: 50rpx;
        color: #ff7070;
      }
      .input_views{
        flex: 1;
        margin: 0 20rpx;
        border-radius: 90rpx;
        background-color: #fff;
        height: 70rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        .u-input{
          margin-left: 10rpx;
        }
      }
    }
    .list{
      position: absolute;
      background-color: #eee9f1;
      height: 100vh;
      width: 100%;
      z-index: 1;
      top: 90rpx;
      left: 0;
    }
  }
</style>